<template>
  <div class="box">
    <div class="tag-list">
      <span v-for="item in dataList" :key="item.id" @click="openTagFun(item.id)">{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
import { Tag } from "../units/api.js";
export default {
  data() {
    return {
      dataList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await Tag();
      console.log("这是子组件获取到的tag", res);
      this.dataList = res.data.data;
    },
    openTagFun(id){
      console.log(id);
      
    }
  },
};
</script>

<style scoped>
.box {
  margin: 1vw;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
}
.tag-list > span {
  margin: 10px;
  text-align: start;
  padding: 4px 9px;
  background-color: #def7ec;
  border-radius: 8px;
}
.tag-list > span:hover{
  background-color: #bcf0da;
}
</style>